<template>
    <div>
        <Header :activIndex = "2"></Header>
        <div class="top_big">
            <img src="../components/static/img/big_img.jpg" alt="">
        </div>
        <div class="main_width content">
            <div class="nav"></div>
            <div class="flex ann_content" style="border: none;">
                <div class="w15">
                    <div class="pro_tit" @click="backFirstPage">项目公告</div>
                    <!-- <div class="lf_tit_item item_bor" :class="active==1?'tit_active':''" @click="getTableDetails(1)"><i class="el-icon-arrow-right" v-show="active==1"></i>项目</div>
                    <div class="lf_tit_item" :class="active==2?'tit_active':''" @click="getTableDetails(2)"><i class="el-icon-arrow-right" v-show="active==2"></i>公告</div> -->
                    <myMenu :gList = 'gList' ref="menu" v-on:childByValue="childByValue" :queryType = 'queryType'></myMenu>
                </div>
                <div class="w85">
                    <template v-if="active==''||active=='1'">
                        <div class="block_tit">
                            <div>项目</div>
                            <div v-if="active !== '1'" @click="getTableDetails(1)" style="cursor: pointer;">更多>></div>
                        </div>
                        <el-table
                            :data="tableData"
                            :height="height"
                            style="width: 100%" class="tab_mar"
                            @row-click="getProDetails">
                            <el-table-column
                                prop="subjectNum"
                                label="标的编号"
                                >
                            </el-table-column>
                            <el-table-column
                                prop="subjectName"
                                label="标的名称"
                                width="300">
                            </el-table-column>
                            <el-table-column
                                prop="transferReservePrice"
                                label="挂牌价格">
                            </el-table-column>
                            <el-table-column
                                prop="disclosureStartDate"
                                label="披露起始日">
                            </el-table-column>
                            <el-table-column
                                prop="clicks"
                                label="点击量" width="100">
                            </el-table-column>
                        </el-table>
                        <el-pagination
                        v-if="active == '1'"
                        class="allpage"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="proTotal"
                        ></el-pagination>
                    </template>
                    <template v-if="active==''||active=='3'">
                        <div class="block_tit">
                            <div>招商</div>
                            <div v-if="active !== '1'" @click="getTableDetails(3)" style="cursor: pointer;">更多>></div>
                        </div>
                        <el-table
                            :data="tableData2"
                            :height="height"
                            style="width: 100%" class="tab_mar"
                            @row-click="getZsDetails">
                            <el-table-column
                                prop="title"
                                label="标题名称"
                                width="300">
                            </el-table-column>
                            <el-table-column
                                prop="releaseTime"
                                label="发布时间">
                            </el-table-column>
                            <el-table-column
                                prop="clicks"
                                label="点击量" width="100">
                            </el-table-column>
                        </el-table>
                        <el-pagination
                        v-if="active == '3'"
                        class="allpage"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="proTotal"
                        ></el-pagination>
                    </template>
                    <template v-if="active==''||active=='2'">
                        <div class="block_tit">
                            <div>公告</div>
                            <div v-if="active !== '2'" @click="getTableDetails(2)" style="cursor: pointer;">更多>></div>
                        </div>
                            <div class="right_table_title posR tab_mar">
                                <el-tabs v-model="activeFirst">
                                    <el-tab-pane label="成交公告" name="first">
                                        <!-- <iTable :tableData = 'tList.tabList' :tableLabel = 'Column[0]' :show = "headShow" v-on:childTable="detailTable"></iTable> -->
                                    </el-tab-pane>                                    					
                                </el-tabs>    
                                <span class="tab_text" @click="more('成交公告')" v-if="active=='2'">更多>></span>                                
                                <span class="right_table_texts">
                                    <i v-for="(vt, it) in tab_list" @click="i_click(it)" :class="vt.check?'active':''" :key="it">{{ vt.name }}</i>
                                </span>
                            </div>
                            <iTable :tableData = 'tList.tabList' :tableLabel = 'tableLabel[activIndex]' :show = "headShow" class="gg-table" @childTable='childTable'></iTable>
                            <div v-if="active=='2'" style="position:relative">
                                <div class="right_table_title posR tab_mar">
                                    <el-tabs v-model="activeName">
                                        <el-tab-pane label="中止公告" name="first">
                                        </el-tab-pane>    
                                         <el-tab-pane label="终结公告" name="second">
                                        </el-tab-pane>                                 					
                                    </el-tabs>                                    
                                </div>
                                <span class="tab_text" @click="more(activeName=='first'?'中止公告':'终结公告')" v-if="active=='2'">更多>></span> 
                                <span class="right_table_texts"></span>
                                <iTable :tableData = 'zzList' :tableLabel = 'Column[0]' :show = "headShow" class="gg-table"  @childTable='childTable'></iTable>
                            </div>
                    </template>
                    <div v-if="active.length>1">

                        
                        <div class="paddB">
                            <div class="right_table_title posR">
                                <span class="right_table_text">{{ leftArr.name }}</span>
                            </div>

                            <div class="right_table_title posR tab_mar" v-if="leftArr.name == '成交公告'">
                                <el-tabs v-model="activeFirst" >
                                    <el-tab-pane label="成交公告" name="first">
                                        <!-- <iTable :tableData = 'tList.tabList' :tableLabel = 'Column[0]' :show = "headShow" v-on:childTable="detailTable"></iTable> -->
                                    </el-tab-pane>                                    					
                                </el-tabs>    
                                <span class="tab_text" @click="more('成交公告')" v-if="active=='2'">更多>></span>                                
                                <span class="right_table_texts" v-if="leftArr.name == '成交公告'">
                                    <i v-for="(vt, it) in tab_list" @click="i_click(it)" :class="vt.check?'active':''" :key="it">{{ vt.name }}</i>
                                </span>
                            </div>
                            <iTable v-if="leftArr.name == '成交公告'" :tableData = "leftArr.name==='成交公告'?tList.tabList:zzList" :tableLabel = 'tableLabel[activIndex]' :show = "headShow" class="gg-table" @childTable='childTable'></iTable>                            
                            <iTable v-else :tableData = "leftArr.name==='成交公告'?tList.tabList:zzList" :tableLabel = 'Column[leftArr.Col]' :show = "headShow"  @childTable='childTable' class="gg-table"></iTable>
                            <el-pagination
                            class="allpage"
                            @size-change="handleSizeChangeZz"
                            @current-change="handleCurrentChangeZz"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="100"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="ggTotal">
                            </el-pagination>                               
                        </div>                             
                    </div> 
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import iTable from '~/components/table'
    import myMenu from '~/components/menu'
 	import Header from "../components/header"	
	export default {
        components: {
          Header,  
          iTable,
          myMenu
        },
        data(){
            return {
                active:'',
                height:200,
                tableData:[],
                tableData2:[],
                activIndex:0,
                activeFirst: 'first',
                activeName: 'first',
                tab_list:[{
                    name:"产权转让",
                    check:true,
                },{
                    name:"企业增资",
                    check:false,
                },{
                    name:"资产转让",
                    check:false,
                },{
                    name:"房屋租赁",
                    check:false,
                }],
                proTotal: 0,
                page: 1,
                limit: 4,
                
                ggTotal: 0,
                queryType:"1",
                gList:[{
                    id:'1',
                    name:'项目', 
                    children: null
                },{
                    id:'3',
                    name:'招商', 
                    children: null
                },{
                     id:'2',
                     name:'公告',
                     children:[{
                         id:'2-1',
                         name:'成交公告',
                         children: null
                     },{
                         id:'2-2',
                         name:'中止公告',
                         children: null
                     },{
                         id:'2-3',
                         name:'终结公告',
                         children: null
                     }]
                 }],
                headShow:true,
                // 子组件的表头数据

				tableLabel: [
					[
						{label: '标的编号', width: '160', prop: 'subjectNum'},
                        {label: '标的名称', width: '250', prop: 'subjectName'},
                        {label: '转让标的评估结果（元）', width: '180', prop: 'evaluateResult'},
						{label: '转让底价（万元）', width: '180', prop: 'reservePrice'},
						{label: '交易价格', width: '150', prop: 'tradingPrice'},
						// {label: '点击量', width: '110', prop: 'clicks'},
					],[
						{label: '标的编号', width: '160', prop: 'subjectNum'},
                        {label: '标的名称', width: '250', prop: 'subjectName'},
                        {label: '投资方名称', width: '180', prop: 'investorName'},
						{label: '投资金额（元）', width: '180', prop: 'reservePrice'},
						{label: '持股比例', width: '150', prop: 'tradingPrice'},
						// {label: '点击量', width: '110', prop: 'clicks'},
					],
					[
						{label: '标的编号', width: '160', prop: 'subjectNum'},
                        {label: '标的名称', width: '250', prop: 'subjectName'},
                        {label: '转让标的评估结果（元）', width: '180', prop: 'evaluateResult'},
						{label: '转让底价（万元）', width: '180', prop: 'reservePrice'},
						{label: '交易价格', width: '150', prop: 'tradingPrice'},
						// {label: '点击量', width: '110', prop: 'clicks'},
					],[
						{label: '标的编号', width: '160', prop: 'subjectNum'},
                        {label: '标的名称', width: '250', prop: 'subjectName'},
                        {label: '转让标的评估结果（元）', width: '180', prop: 'evaluateResult'},
						{label: '租赁底价（万元）', width: '180', prop: 'reservePrice'},
						{label: '交易价格', width: '150', prop: 'tradingPrice'},
						// {label: '点击量', width: '110', prop: 'clicks'},
					]				
				],                
                //中止终结
                zzList:[],
                tList:{
                    currentPage:1,
                    showCount:10, 
                    tabList: [],
                 },
                 Column:{
                    0:[
                        {label: '标题名称', width: '', prop: 'subjectName'},
                        {label: '发布日期', width: '110', prop: 'createDate'},                    
                    ],
                    2:[
						{label: '标的编号', width: '', prop: 'subjectNum'},
						{label: '标的名称', width: '', prop: 'subjectName'},
						{label: '转让标的评估结果（元）', width: '', prop: 'tradingPrice'},
						{label: '披露起始日', width: '', prop: 'createDate'},
						{label: '点击量', width: '110', prop: 'clicks'},               
                    ],                    
                 },
                 leftArr:{
                    name:"",
                    Col:'0',
                    list:'tabList',
                },
                announcementType: '1',
                keyPath: ''
            }
        },
        methods: {
            backFirstPage() {
                this.active = ''
                this.limit = 4
                this.getProjectInfo()
                this.getZsInfo()
                this.height = 200;
                this.$refs.menu.select(undefined,0)
                this.isCollapse = false;
            },
            //公告的单击事件
            childTable(row) {
                let routeData = ''
                if(!row.announcementType) {
                    routeData = this.$router.resolve({path:'clinch_detail',query:{id:row.clinchId}})
                }else {
                    if(row.announcementType) routeData = this.$router.resolve({path:'zz_detail',query:{id:row.announcementId}})
                } 
                window.open(routeData.href, '_blank')
            },
            //公告点击更多
            more(type) {
                let key = type==='成交公告'?'2-1':type==='中止公告'?'2-2':'2-3'
                this.childByValue(key)
                this.$refs.menu.select(key,1)
            },
            // 成交公告
            getSubjectClinchInfo(page,subjectType) { 
				this.get('/info/announcement/subjectClinch/page',{
					page: page,
                    limit: this.limit,
                    subjectType
				}).then(data => {
                    // this.subjectClinchList = data.data.list;	
                    this.tList.tabList = data.data.list;	
                    // this.zzList = data.data.list;	
                    this.ggTotal = data.data.total;
				})
            },
            // 中止终结公告
            getZzInfo() { 
				this.get('/info/announcement/page',{
					page: this.page,
                    limit: this.limit,
                    announcementType: this.announcementType
				}).then(data => {
                    // this.subjectClinchList = data.data.list;	
                    this.zzList= data.data.list;	
                    this.ggTotal = data.data.total;
				})
			},
            childByValue(key, keyPath){
                this.page = 1
                this.keyPath = key;
                if(key.length>1) {
                    this.leftArr = {
                        name: (() => {
                            if(key === '2-1') {
                                this.getSubjectClinchInfo(this.page,this.activIndex+1);
                                return '成交公告';
                            }
                            if(key === '2-2') {
                                this.announcementType = '1'
                                this.getZzInfo();
                                return '中止公告';
                            }
                            if(key === '2-3') {
                                this.announcementType = '2'
                                this.getZzInfo();
                                return '终结公告';
                            }
                        })(),
                        Col:key == '2-1'? 2:0,
                        list:'tabList',
                    }
                }    
                this.getTableDetails(key); 
            },
            i_click(index){
				this.tab_list.map(v => {
					this.$set(v, 'check', false)
					return v
				})
                this.tab_list[index].check = true;
                this.activIndex = index;
                this.getSubjectClinchInfo(1,index+1);
            },
            handleSizeChangeZz(limit) {
                this.limit = limit;
                if(this.keyPath === '2-1') {
                    this.getSubjectClinchInfo(this.page,this.activIndex+1);
                }else {
                    this.getZzInfo()
                }   
            },
            handleCurrentChangeZz(page) {
                this.page = page;
                if(this.keyPath === '2-1') {
                    this.getSubjectClinchInfo(page,this.activIndex+1);
                }else {
                    this.getZzInfo()
                }   
            },
            handleSizeChange(limit) {
                console.log(this.active)
                this.limit = limit;
                if(this.active==='1') this.getProjectInfo();
                if(this.active==='3') this.getZsInfo();
            },
            handleCurrentChange(page) {
                console.log(this.active)
                this.page = page;
                if(this.active==='1') this.getProjectInfo();
                if(this.active==='3') this.getZsInfo();
            },
            getTableDetails(i) {
                if(i===1) {this.$refs.menu.select('0',0),this.height = 600};
                if(i===3) {this.$refs.menu.select('1',0),this.height = 600};
                this.active = i;
                this.limit = 10;
                if(i==='1') this.getProjectInfo();
                if(i==='3') this.getZsInfo();
            },
            getProjectInfo() {
				this.get('/info/announcement/project/page', {
                    page: this.page,
					limit: this.limit
                }).then(data => {
                    this.tableData = data.data.list;
                    this.proTotal = data.data.total;
				})
            },
            getZsInfo() {
				this.get('/api/webargenterpriseestablishing/page', {
                    page: this.page,
					limit: this.limit
                }).then(data => {
                    this.tableData2 = data.data.list;
                    this.proTotal = data.data.total;
				})
            },
            getZsDetails(row) {
                this.get(`/api/webargenterpriseestablishing/addClicks/${row.webargEnterpriseEstablishingId}/${row.clicks}`)
                window.open(row.url)
            },
            getProDetails(row) {
                let routeData = ''
				switch (row.detailType) {
					case 2:
                        routeData = this.$router.resolve({path:'/transfer_detail',query: {id: row.subjectId}})
						break;
					case 3:
						routeData = this.$router.resolve({path:'/formal_detail',query: {id: row.subjectId}})
						break;
					case 4:
						routeData = this.$router.resolve({path:'/realtor_detail',query: {id: row.subjectId}})
						break;
					case 5:
						routeData = this.$router.resolve({path:'/increase_detail',query: {id: row.subjectId}})
						break;
					case 6:
						routeData = this.$router.resolve({path:'/assettransfer_detail',query: {id: row.subjectId}})
						break;
					default: break;
                }
                window.open(routeData.href, '_blank');
			},
        },
        mounted(){
            let query=this.$route.query
            if(Object.keys(query).length==0){
                this.active=''
            }else{
                this.active=query.active
            }
            this.getProjectInfo();
            this.getZsInfo();
            this.getSubjectClinchInfo(1,1);
            this.getZzInfo();
        },
        watch: {
            activeName(newVal,oldVal) {
                this.announcementType = newVal === 'first'? '1':'2'
                this.getZzInfo()
            },
            active(v) {
                if(v!="2"||v!="") {
                    this.height = ''
                }
            }
        },
    }
</script>
<style lang="scss" scoped>
    .top_big>img{
        width: 100%;height: 490px;background: no-repeat center / cover;
    }
    .w15{
        width: 15%
    }
    .w85{
        width: 82%;
    }
    .lf_tit_item{
        font-size: 15px;
        text-align: center;
        margin: 10px 0;
        position: relative;
        cursor: pointer;
        >i{
            position: absolute;
            left: 0;
            top: 3px
        }
    }
    .pro_tit{
        width: 200px;
        background: #2C9F45;
        color: #fff;
        text-align: center;
        font-size: 18px;
        padding: 10px 0;
        cursor: pointer;
    }
    .item_bor{
        border-bottom: 2px dotted #CCCCCC;
        padding-bottom:10px; 
    }
    .block_tit{
        border-bottom: 2px solid #2C9F45;
        display: flex;
        justify-content: space-between;
        align-items: center
    }
    .block_tit>div:first-child{
        font-size: 18px;
        letter-spacing:5px;
        color: #2C9F45;
        padding: 10px;
        padding-top: 0 
    }
    td{
        border-bottom: 0!important
    }
    .tab_mar{
        margin:20px 0
    }
    .tit_active{
        color: #2C9F45
    }
    .content >>> .el-tabs__header {
        border-top: none;
    }
    .gg-table >>> .has-gutter tr th {
        background: #fff !important;
        color: #2c9f45;
    }
    // >>> .el-submenu__title {
    //     color: #2c9f45 !important;
    //     // background-color: #2c9f45 !important;
    // }
</style>